<template>
    <div class="modal" v-show="isShowModal">
        <div class="mask" @click="changeIsShowModal(false)">></div>
        <div class="loginBox">
            <div class="close" @click="changeIsShowModal(false)"></div>
            <section class="nav">
                <a href="#" :class="{ current: isShowContent }" @click="isShowContent = true">
                    手机号登陆
                </a>
                |
                <a href="#" @click="showQrCode" :class="{ current: !isShowContent }">二维码登陆</a>
            </section>
            <div class="content">
                <!-- 手机号码登录 -->
                <div class="phoneLogin" v-show="isShowContent">
                    <div class="row">
                        <input
                            type="text"
                            class="ipt"
                            placeholder="请输入手机号"
                            v-model="phoneNum"
                        />
                    </div>
                    <div class="row">
                        <slide-verify
                            :l="42"
                            :r="20"
                            :w="362"
                            :h="140"
                            @success="onSuccess"
                            @fail="onFail"
                            @refresh="onRefresh"
                            :style="{ width: '100%' }"
                            class="slide-box"
                            ref="slideBlock"
                            :slider-text="msg"
                        ></slide-verify>
                    </div>
                    <div class="row">
                        <input
                            type="text"
                            class="ipt"
                            placeholder="请输入短信验证码"
                            v-model="codeNum"
                        />
                        <button class="btnCode">获取验证码</button>
                    </div>
                    <div class="row">
                        <button class="btnLogin">登录</button>
                    </div>
                </div>
                <!-- 微信二维码登录 -->
                <div class="qrLogin" v-show="!isShowContent" id="weixin">微信二维码登录</div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { sendSMSApi, phoneLogin, bindingPhoneAPI } from '@/request/api';

export default {
    data() {
        return {
            phoneNum: '',
            codeNum: '',
            isShowContent: true,
            msg: '向右滑动',
        };
    },
    computed: {
        ...mapState({
            isShowModal: state => state.showLoginModal.isShowModal,
        }),
    },
    methods: {
        ...mapMutations({
            changeIsShowModal: 'showLoginModal/changeIsShowModal',
        }),
        // 拼图成功
        onSuccess(times) {
            let ms = (times / 1000).toFixed(1);
            this.msg = 'login success, 耗时 ' + ms + 's';
        },
        // 拼图失败
        onFail() {
            this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
            this.msg = '再试一次';
        },
        showQrCode() {
            this.isShowContent = false;
            let _this = this;
            new WxLogin({
                id: 'weixin',
                appid: 'wx67cfaf9e3ad31a0d', // 这个appid要填死
                scope: 'snsapi_login',
                // 扫码成功后重定向的接口
                redirect_uri: 'https://sc.wolfcode.cn/cms/wechatUsers/shop/PC',
                // state填写编码后的url
                state: encodeURIComponent(window.btoa('http://127.0.0.1:8080' + _this.$route.path)),
                // 调用样式文件
                href: 'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLA0KLmltcG93ZXJCb3ggLmluZm8gew0KICAgIGRpc3BsYXk6IG5vbmU7DQp9DQouaW1wb3dlckJveCBxcmNvZGUgew0KICAgIG1hcmdpbi10b3A6IDIwcHg7DQp9DQo=',
            });
        },
    },
};
</script>

<style lang="less" scoped>
#weixin {
    /* background-color: #fcf; */
    display: flex;
    justify-content: center;
    margin-top: -20px;
}
.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    .mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .loginBox {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 555px;
        height: 423px;
        background: url('../assets/img/login-box-bg.png');
        .close {
            background: url('@/assets/img/close.png');
            width: 22px;
            height: 22px;
            position: absolute;
            right: 50px;
            top: 10px;
            cursor: pointer;
        }
        .nav {
            display: flex;
            justify-content: center;
            padding-top: 50px;
            a {
                padding: 0 10px;
                color: #9b9ab3;
                &.current {
                    color: #030303;
                }
            }
        }
        .content {
            width: 355px;
            margin: 20px auto 0;
            height: 200px;
            .phoneLogin {
                .row {
                    display: flex;
                    margin-bottom: 20px;
                }
                .ipt {
                    box-shadow: 0;
                    flex: 1;
                    height: 48px;
                }
                .btn {
                    color: #fff;
                    background-color: #0a328e;
                    border: none;
                    cursor: pointer;
                }
                .btnCode {
                    margin-left: 10px;
                    line-height: 50px;
                    width: 100px;
                    text-align: center;
                }
                .btnLogin {
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                }
            }
        }
    }
}
</style>
